<script>
  $(document).ready(function(){
    $("input, textarea").focus(function () {
      $(".info").css('display','none');
      $(this).parent().next("span").css('display','block');
    });
    
    addDomain = function() {
      $("#referential > form").append('<p><label>Domaine de compétences</label><br /><input type="text" /></p>');
    }
  });
</script>
<div id="referential">
  <form action="action/referential/add" method="POST">
    <ul id="referential_elements">
      <li id="referential_main">
        <div class="actions">
          <span class="action" id="addDomain"><a href="#" onclick="javascript:addDomain();">Ajouter un domaine de compétences</a></span>
        </div>
        <p>
          <label class="desc" for="main_title"><?php echo elgg_echo("referential:main:title") ?></label>
          <input type="text" id="main_title" name="mainTitle" />
        </p>
        <span class="info">Titre du portfolio de compétences</span>
        <p>
          <label class="desc" for="main_desc"><?php echo elgg_echo("referential:main:desc") ?></label>
          <textarea id="main_desc" name="mainDesc"></textarea>
        </p>
        <span class="info">Description de votre portfolio de compétences</span>
        <div style="clear:both;"></div>
      </li>
      <li id="dom_1" class="dom">
        <div class="actions">
          <span class="action" id="addDomain"><a href="#" onclick="javascript:addDomain();">Ajouter un domaine de compétences</a></span>
          <span class="action" id="addCompetence"><a href="#" onclick="javascript:addCompetence();">Ajouter une compétence requise</a></span>
        </div>
        <p>
          <label class="desc" for="dom_title_1"><?php echo elgg_echo("referential:dom:title") ?></label>
          <input type="text" name="dom_title_1" />
        </p>
        <span class="info">Titre du domaine de compétences</span>
        <p>
          <label class="desc" for="dom_desc_1"><?php echo elgg_echo("referential:dom:desc") ?></label>
          <textarea id="dom_desc_1" name="dom_desc_1"></textarea>
        </p>
        <span class="info">Description du domaine de compétences</span>
       <ul class="comp" id="comp_1">
          <li id="comp_1_1" class="comp">
            <p>
              <label class="desc" for="sdesc_1_1"><?php echo elgg_echo("referential:comp:desc") ?></label>
              <textarea id="sdesc_1_1" name="sdesc_1_1"></textarea>
            </p>
            <span class="info">Description de la compétence</span>
            <p>
              <label class="desc" for="ldesc_1_1"><?php echo elgg_echo("referential:comp:desc") ?></label>
              <textarea id="ldesc_1_1" name="ldesc_1_1"></textarea>
            </p>
            <span class="info">Description de la compétence</span>
          </li>
        </ul>
        <div style="clear:both;"></div>
      </li>
    </ul>
  </form>
</div>
